<template>
  <el-table :data="pagedData" style="width: 100%">
    <el-table-column prop="id" label="ID" width="100" />
    <el-table-column prop="name" label="名字" />
  </el-table>
  <el-pagination
      layout="prev, pager, next"
      :total="tableData.length"
      :page-size="pageSize"
      :current-page="currentPage"
      @current-change="handlePage"
      style="margin-top: 10px"
  />
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'

const tableData = ref(
    Array.from({ length: 35 }, (_, i) => ({ id: i + 1, name: `用户${i + 1}` }))
)
const pageSize = 10
const currentPage = ref(1)
const handlePage = (val: number) => currentPage.value = val
const pagedData = computed(() => {
  const start = (currentPage.value - 1) * pageSize
  return tableData.value.slice(start, start + pageSize)
})
</script>
